<template>
  <view class="shopmanagement-wrap">
    <view class="shopmanagement-wrap-item" v-for="(item, index) in tabbar" :key="index">
      <view class="shopmanagement-title">{{ item.name }}</view>
      <view class="shopmanagement-list">
        <view class="shopmanagement-item" v-for="(item1, index1) in item.list" :key="index1" @click="toNextPage(item1)" >
          <up-image :show-loading="true" :src="item1.icon" width="24px" height="24px" bgColor="#fff"></up-image>
          <view class="item-title">{{ item1.name }}</view>
        </view>
      </view>
    </view>
    <SalesButton />
    <u-popup :show="showCashierPopup" mode="bottom">
      <view class="popup-options">
        <view class="button" @click.stop="onScanCode">
           <image class="icon" :src="IMG_URL2 + 'shopm/scanpopup.svg'"></image>扫码收银
        </view>
        <view class="button" @click.stop="onInputCode">
          <image class="icon" :src="IMG_URL2 + 'shopm/discountpopup.svg'"></image>输入款号收银</view>
        <view class="button" @click.stop="showCashierPopup = false">取消</view>
      </view>
    </u-popup>
  </view>
</template>

<script setup>
import { IMG_URL2 } from "@/config";
import { shopApi } from "@/api";
import SalesButton from "@/components/salesbutton.vue";
import { getStorage } from "@/utils/storage";
import { getUserInfo } from "@/service";
import { useExchangeStore } from '@/store/modules/exchange'
let role=ref(getStorage('role'))
let userInfo = getUserInfo();
const exchangeStore = useExchangeStore()
const showCashierPopup = ref(false);
const onScanCode = () => {
  showCashierPopup.value = false;
  // uni.scanCode({
  //   success: (res) => {
  //     getFrontProductBySkuCode(res.result);
  //   }
  // });

  uni.scanCode({
    success: (res) => {
      console.log(res,'resres')
      getFrontProductBySkuCode(res.result);
      // uni.navigateTo({
      //   url: item.url + "?code=" + res.result
      // });
    },
    fail: (err) => { console.log('失败回调', err); },
  });
};
const onInputCode = () => {
  showCashierPopup.value = false;
  // uni.navigateTo({ url: '/pagesshop/scancodecashier/index' });
  uni.navigateTo({
    url: `/pagesshop/inventory/addproductnum1`
  });
};
let tabbar = ref([
  {
    name: "人",
    icon: "",
    list: [
      {
        name: "会员管理",
        icon: IMG_URL2 + "shopm/user.svg",
        targetType: "",
        url: "/pagesshop/member/index"
      },
      {
        name: "员工表现",
        icon: IMG_URL2 + "shopm/chart-1.svg",
        targetType: "",
        url: "/pagesshop/staff/index"
      },
      {
        name: "培训中心",
        icon: IMG_URL2 + "shopm/video.svg",
        targetType: "",
        url: "/pages/trainingcenter/index"
      }
    ]
  },
  {
    name: "货",
    icon: "",
    list: [
      {
        name: "扫码收银",
        icon: IMG_URL2 + "shopm/scan.svg",
        targetType: "scanCode",
        url: "/pagesshop/scancodecashier/index"
      },
      {
        name: "销售记录",
        icon: IMG_URL2 + "shopm/root-list.svg",
        targetType: "",
        url: "/pagesshop/sales/index"
      },
      {
        name: "经营数据填写",
        icon: IMG_URL2 + "shopm/edit.svg",
        targetType: "",
        url: "/pagesshop/businessdata/index"
      },
      {
        name: "销售统计",
        icon: IMG_URL2 + "shopm/chart.svg",
        targetType: "",
        url: "/pagesshop/sales/salesdata"
      },
      {
        name: "收款资料管理",
        icon: IMG_URL2 + "shopm/qrcode.svg",
        targetType: "",
        url: "/pagesshop/collectionofpayment/index"
      },
      {
        name: "库存管理",
        icon: IMG_URL2 + "shopm/logo-windows.svg",
        targetType: "",
        url: "/pagesshop/inventory/index"
      }
    ]
  },
  {
    name: "场",
    icon: "",
    list: [
      {
        name: "线上展厅",
        icon: IMG_URL2 + "shopm/Frame1.svg",
        targetType: "",
        url: "/pagesshop/onlineexhibitionhall/index"
      },
      {
        name: "店铺陈列",
        icon: IMG_URL2 + "shopm/Frame2.svg",
        targetType: "",
        url: "/pagesshop/shopdisplay/index"
      }
    ]
  }
]);
onShow(() => {
  exchangeStore.setscanPageData([])
  if (role.value != 2) {
    tabbar.value[1].list = tabbar.value[1].list.filter(item => item.name != "收款资料管理");
    if (!userInfo.isOpaStaffDataShowAuth) {
      tabbar.value[0].list = tabbar.value[0].list.filter(item => item.name != "员工表现");
    }
    if (!userInfo.isOpaSalesDataShowAuth) {
      tabbar.value[1].list = tabbar.value[1].list.filter(item => item.name != "销售统计");
    }
    console.log(userInfo.isOpaProduct,'userInfo.isOpaProduct')
    if (!userInfo.isOpaProduct) {
      tabbar.value[1].list = tabbar.value[1].list.filter(item => item.name != "库存管理");
    }
  }

})
const toNextPage = (item) => {
  if (item.targetType === "scanCode") {
    console.log(item.targetType,'item.targetType ')
    // uni.scanCode({
    //   success: (res) => {
    //     console.log(res,'resres')
    //     getFrontProductBySkuCode(res.result);
    //   }
    // });
    showCashierPopup.value = true;
  }else{
    if (item.url) {
      uni.navigateTo({
        url: item.url
      });
    }
  }
};

const getFrontProductBySkuCode = (code) => {
	shopApi.SCANPAYGETFRONTPRODUCTBYSKUCODE({productSkuCode: code}).then((res) => {
		if (res.code == 200) {
      console.log(res);
      uni.navigateTo({
        url: "/pagesshop/scancodecashier/index?code=" + code
      });
		}else{
      uni.showToast({
          title: res.errMsg,
          icon: "success",
      });
    }

	})

};
</script>

<style lang="scss">
page {
  background-color: #f1f1f1;
}

.shopmanagement-wrap {
  padding: 20px;
  box-sizing: border-box;

  .shopmanagement-wrap-item {
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    color: #2c2c2c;
    margin-bottom: 20px;

    .shopmanagement-title {
      font-family: PingFang SC;
      font-size: 16px;
      font-weight: 600;
      line-height: 24px;
      text-align: left;
      margin-bottom: 8px;
    }

    .shopmanagement-list {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      .shopmanagement-item {
        width: 48%;
        padding: 12px 16px 12px 16px;
        box-sizing: border-box;
        border-radius: 12px;
        font-size: 14px;
        font-weight: 400;
        line-height: 22px;
        display: flex;
        align-items: center;
        background-color: #fff;
        margin-bottom: 8px;

        &:nth-child(2n) {
          margin-right: 0px;
        }

        .item-title {
          margin-left: 4px;
        }
      }
    }
  }
}
.popup-options {
  background-color: #fff;
  border-radius: 12px 12px 0 0;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.popup-options .button {
  font-size: 16px;
  border: none;
  border-radius: 0px;
  color: #333;
  cursor: pointer;
  transition: background-color 0.3s ease;
  text-align: center;
  border-bottom: 1rpx solid #f3f3f3;
  padding: 20rpx 0px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.icon {
  width: 40rpx;
  height: 40rpx;
  margin-right: 20rpx;
}
.popup-options .button:nth-child(2){
  border-bottom: 8rpx solid #f3f3f3;
}
.popup-options .button:last-child{
  border-bottom: 0px;
  padding: 0px 0px 20px 0px;
}


</style>
